﻿module Policies
open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.JQuery.Mobile
open System

//data structure or 'class' to hold policy information
type Policy = {Id:string; Type:string; Premium:float; Coverage:float;  Expires:DateTime; Description:string}

//this method runs on the server 
//it is called from javascript (see below)
//it retuns a list of policies as json
[<Rpc>]
let getPolicies() =
    [
        "1111", "Automotive", 200., 250000.00, DateTime(2013,12,31), "Cars, motorbikes, trucks, boats"
        "2222", "Home", 300., 500000.00, DateTime(2020,12,31), "General household"
        "3333", "Flood", 250., 1000000.00, DateTime(2015,12,31), "Flooding due to a landslide, hurricane, earthquake, or other natural disaster"
    ]
    |> List.map (fun (a,b,c,d,e,f) -> {Id=a; Type=b; Premium=c; Coverage=d; Expires=e; Description=f})

[<Rpc>]
let getPoliciesAsync() = async{ return getPolicies()}

[<JavaScript>] 
let PolicyPageContent() = JQuery.Of("#policies").Children(":jqmData(role=content)")

[<JavaScript>]
let LoadPolices() =
    let s1 = "font-weight:bold; font-size:smaller; background:#D6EBFF; padding:5px"
    let s2 = "font-weight:bold; font-size:smaller; background:#E0FFFF; padding:5px"
    let s3 = "font-size:smaller; background:#F5F5FF; padding:5px"
    async {
        let! polices = getPoliciesAsync() //here the server is called to get the policies
        let children =
            Div[] -< [
                UL[HTML5.Attr.Data "role" "listview"; Attr.Style "margin-left:-50px"] -<
                
                    [for p in polices do 

                        yield OL [HTML5.Attr.Data "role" "collapsible"] -< [
                            H3[Text p.Type; Text " "; Text p.Id]
                            Div [Attr.Class "ui-grid-a"] -< [
                                Div[Attr.Class "ui-block-a"; Attr.Style s1] -<  [Text "Premium"]
                                Div[Attr.Class "ui-block-b"; Attr.Style s1] -<  [Text (p.Premium.ToString())]
                                Div[Attr.Class "ui-block-a"; Attr.Style s2] -<  [Text "Coverage"]
                                Div[Attr.Class "ui-block-b"; Attr.Style s2] -<  [Text (p.Coverage.ToString())]
                                Div[Attr.Class "ui-block-a"; Attr.Style s1] -<  [Text "Expires"]
                                Div[Attr.Class "ui-block-b"; Attr.Style s1] -<  [Text (p.Expires.ToString())]
                            ]
                            Div [Attr.Class "ui-grid-solo"; Attr.Style s3] -<
                                [Text (p.Description)]
                        ]
                    ]
                ]
        PolicyPageContent().Html(children.Html).Trigger("create") |> ignore
    }


//"javascript" tag marks it as method that is converted to javascript
//polices page, dynamically constructed on the client at load time
//shows a list of policies
[<JavaScript>]
let PoliciesPage () = 
    
    //header section of the page
    let header =
        Div [HTML5.Attr.Data "role" "header"; HTML5.Attr.Data "theme" "b"] -< [    
                  
                SiteCommon.homeButton()
                      
                H1 [Text "Policies"]
            ]

    //contents section
    let content =  Div [HTML5.Attr.Data "role" "content"] 

    let page = 
        Div [Id "policies"; HTML5.Attr.Data "role" "page"] -< [
            header
            content
            SiteCommon.footer MainPages.Policies
            ]
        |>! OnBeforeShow (fun _ -> PolicyPageContent() |> ShowBusy)
        |>! OnShow (fun _ -> LoadPolices() |> Async.Start)

    page